<template>
  <div @scroll="handleScroll" id="homepage">
    <!-- 头部样式 -->
    <header>
      <transition>
        <div class="title" :style="backgroundStyle">
          <div class="logo">
            <img
              :src="
                flag
                  ? require('../../assets/images/home1_slices/logo变色@2x.png')
                  : require('../../assets/images/home1_slices/logo@2x.png')
              "
            />
          </div>
          <div class="state">
            <p :style="flag ? 'color:#369AFF' : 'color:white'">智云健康</p>
            <img
              :src="
                flag
                  ? require('../../assets/images/home1_slices/CloUDr变色@2x.png')
                  : require('../../assets/images/home1_slices/ClouDr.@2x.png')
              "
            />
          </div>
          <div class="search">
            <van-search
              v-model="value"
              shape="round"
              background="none"
              placeholder="搜索疾病、症状、商品、内容"
              v-show="flag"
              @click="goTosearch"
            />
          </div>
          <div class="message" @click="goToMsg">
            <van-icon
              name="comment-o"
              :style="flag ? 'color:black' : 'color:white'"
            />
          </div>
        </div>
      </transition>
      <div class="bigSearch" :style="transfromStyle">
        <van-search
          v-model="value"
          shape="round"
          background="none"
          @click="goTosearch"
          :disabled="true"
        />
      </div>
    </header>
    <!-- 快速问诊和找医生 -->
    <div class="advertising">
      <div class="advertisingLeft">
        <img src="@/assets/images/home1_slices/快速问诊@2x.png" alt="" />
      </div>
      <div class="advertisingRight">
        <img
          src="@/assets/images/home1_slices/找医生@2x.png"
          alt=""
          @click="handsClick"
        />
      </div>
    </div>
    <!-- 五个导航 -->
    <van-grid column-num="5" :border="false" icon-size="1.25rem">
      <van-grid-item
        :icon="item.url"
        :text="item.title"
        v-for="item in gridList"
        :key="item.title"
        @click="goToDetatil(item.path)"
      />
    </van-grid>
    <!-- 热门科室的导航 -->
    <nav>
      <div class="nav_header">
        <h3>热门科室</h3>
        <div>
          <span>全部科室</span>
          <img src="@/assets/images/home1_slices/＞@2x.png" />
        </div>
      </div>
      <van-grid column-num="5" :border="false" :square="true">
        <van-grid-item
          v-for="value in navGridList"
          :key="value.title"
          :icon="value.url"
          :text="value.title"
        />
      </van-grid>
    </nav>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 健康数据 -->
    <div class="health-data">
      <div class="health_header">
        <h3>健康数据</h3>
        <div>
          <span>全部</span>
          <img src="@/assets/images/home1_slices/＞@2x.png" />
        </div>
      </div>
      <div class="heaith_content">
        <div class="heaith_content_top">
          <div class="item">
            <div class="item_top">
              <img :src="require('@/assets/images/home1_slices/运动@2x.png')" />
              <span>运动</span>
            </div>
            <p class="record">尚未记录</p>
            <div class="item_bottom">
              <span>Kcal</span>
            </div>
          </div>
          <div class="item">
            <div class="item_top">
              <img :src="require('@/assets/images/home1_slices/饮食@2x.png')" />
              <span>饮食</span>
            </div>
            <p class="record">尚未记录</p>
            <div class="item_bottom">
              <span>Kcal</span>
            </div>
          </div>
          <div class="item">
            <div class="item_top">
              <img :src="require('@/assets/images/home1_slices/体重@2x.png')" />
              <span>体重</span>
            </div>
            <p class="record">尚未记录</p>
            <div class="item_bottom">
              <span>kg</span>
            </div>
          </div>
          <div class="item">
            <div class="item_top">
              <img :src="require('@/assets/images/home1_slices/血糖@2x.png')" />
              <span>血糖</span>
            </div>
            <p class="record">尚未记录</p>
            <div class="item_bottom">
              <span>mmol/L</span>
            </div>
          </div>
        </div>
        <div class="heaith_content_bottom" v-show="show">
          <div class="item" v-for="item in healthList" :key="item.title">
            <div class="item_top">
              <img :src="item.url" />
              <span>{{ item.title }}</span>
            </div>
            <p class="record">{{ item.record }}</p>
            <div class="item_bottom">
              <span v-if="item.bigNum">{{ item.msg }}</span>
              <p v-else class="pharmacy">
                <img :src="item.msg" />
              </p>
            </div>
          </div>
        </div>
        <p class="heaith_more" @click="handleClick">
          <span v-if="show">收回<van-icon name="arrow-up" /></span>
          <span v-else>更多<van-icon name="arrow-down" /></span>
        </p>
      </div>
    </div>
    <!-- 健康评测 -->
    <section>
      <div class="section_item">
        <h3>健康评测</h3>
        <div class="sections_item_body">
          <img :src="require('@/assets/images/home1_slices/图层 43@2x.png')" />
          <div class="sections_item_body_middle">
            <p class="section_p1">身体健康状况评测</p>
            <p class="section_p2">给自己的健康打分</p>
          </div>
          <van-button type="primary" :v-once="true" :round="true"
            >立即评测</van-button
          >
        </div>
      </div>
      <div class="section_item">
        <h3>健康任务</h3>
        <div class="sections_item_body">
          <img :src="require('@/assets/images/home1_slices/图层 44@2x.png')" />
          <div class="sections_item_body_middle">
            <p class="section_p1">完成健康评估，领取专属任务</p>
            <p class="section_p2">每天打卡，变成健身达人</p>
          </div>
          <van-button type="primary" :round="true">去评估</van-button>
        </div>
      </div>
    </section>
    <!-- 底部文章 -->
    <main>
      <van-tabs
        v-model:active="active"
        swipeable
        color="#0980FA"
        title-active-color="#0980FA"
        line-width="20px"
        sticky
        swipe-threshold="7"
        offset-top="1.35rem"
      >
        <van-tab title="精选">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="慢病">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="饮食">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="儿童">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="睡眠">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="养生">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
        <van-tab title="养性">
          <van-list
            v-model:loading="state.loading"
            :finished="state.finished"
            finished-text="我真的一滴都没有了"
            @load="onLoad"
            offset="10"
            :immediate-check="false"
          >
            <ul class="article_ul">
              <li v-for="value in resList.arr" :key="value._id">
                <h3>{{ value.title }}</h3>
                <div class="article">
                  <div class="article_left">
                    <p>{{ value.msg }}</p>
                    <div class="article_user">
                      <img :src="str + value.pic" />
                      <span>{{ value.uesr }}</span>
                    </div>
                  </div>
                  <div class="article_right">
                    <img :src="str + value.imgUrl" />
                  </div>
                </div>
                <div class="acticle_p">
                  <span>{{ value.date }}</span>
                  <div class="activle_read">
                    <span>阅读&nbsp;{{ value.read }}</span>
                    <span v-if="value.like > 0"
                      >&nbsp;·点赞&nbsp;{{ value.like }}</span
                    >
                    <span v-else></span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </van-tab>
      </van-tabs>
    </main>
    <!-- 回到顶部 -->
    <aside>
      <div class="goTop" v-show="nav" @click="goTop">
        <van-icon name="back-top" size="0.57rem" />
        顶部
      </div>
    </aside>
  </div>
</template>
<script>
import { onMounted, onUnmounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { getHomeListdata } from "../../utils/api";
export default {
  setup() {
    // const actives = ref(0);
    let flag = ref(false);
    let show = ref(false);
    let nav = ref(false);
    let number = ref(0.025);
    let curr = ref(1);
    let str = ref("");
    let resList = reactive({
      arr: [],
    });
    let backgroundStyle = ref({
      background: "rgba(255, 255, 255, 0)",
    });
    let transfromStyle = ref({
      transform: "translate(0px , 0px)",
      width: "100%",
    });
    const router = useRouter();
    const state = reactive({
      loading: false,
      finished: false,
      // refreshing: false,
    });
    const goToDetatil = (path) => {
      router.push(path);
    };
    const value = ref("");
    const active = ref(0);
    const gridList = reactive([
      {
        url: require("@/assets/images/home1_slices/导诊助手图标@2x.png"),
        title: "导诊助手",
        path: "/homehelper",
      },
      {
        url: require("@/assets/images/home1_slices/健康评估@2x.png"),
        title: "健康评估",
        path: "/homeassess",
      },
      {
        url: require("@/assets/images/home1_slices/专家服务@2x.png"),
        title: "专家服务",
        path: "/expertservice",
      },
      {
        url: require("@/assets/images/home1_slices/疾病百科@2x.png"),
        title: "疾病百科",
        path: "/homedisease",
      },
      {
        url: require("@/assets/images/home1_slices/复诊购药@2x.png"),
        title: "复诊购药",
        path: "/homemedicine",
      },
    ]);
    const navGridList = reactive([
      {
        url: require("@/assets/images/home1_slices/呼吸内科@2x.png"),
        title: "呼吸内科",
      },
      {
        url: require("@/assets/images/home1_slices/内分泌@2x.png"),
        title: "内分泌",
      },
      {
        url: require("@/assets/images/home1_slices/妇科@2x.png"),
        title: "妇科",
      },
      {
        url: require("@/assets/images/home1_slices/心血管内科@2x.png"),
        title: "心血管内科",
      },
      {
        url: require("@/assets/images/home1_slices/耳鼻喉科@2x.png"),
        title: "耳鼻喉科",
      },
      {
        url: require("@/assets/images/home1_slices/泌尿外科@2x.png"),
        title: "泌尿外科",
      },
      {
        url: require("@/assets/images/home1_slices/口腔科@2x.png"),
        title: "口腔科",
      },
      {
        url: require("@/assets/images/home1_slices/皮肤科@2x.png"),
        title: "皮肤科",
      },
      {
        url: require("@/assets/images/home1_slices/儿科@2x.png"),
        title: "儿科",
      },
      {
        url: require("@/assets/images/home1_slices/消化内科@2x.png"),
        title: "消化内科",
      },
    ]);
    const images = reactive([
      require("@/assets/images/home1_slices/banner@2x.png"),
      require("@/assets/images/home1_slices/找医生@2x.png"),
      require("@/assets/images/home1_slices/快速问诊@2x.png"),
    ]);
    const healthList = reactive([
      {
        title: "血压",
        url: require("@/assets/images/home1_slices/血压@2x.png"),
        record: "尚未记录",
        msg: "mmHg",
        bigNum: true,
      },
      {
        title: "心率",
        url: require("@/assets/images/home1_slices/心率@2x.png"),
        record: "尚未记录",
        msg: "次/分钟",
        bigNum: true,
      },
      {
        title: "血脂",
        url: require("@/assets/images/home1_slices/血脂@2x.png"),
        record: "尚未记录",
        msg: "mmol/L",
        bigNum: true,
      },
      {
        title: "用药",
        url: require("@/assets/images/home1_slices/血压@2x.png"),
        record: "尚未记录",
        msg: require("@/assets/images/home1_slices/+@2x.png"),
        bigNum: false,
      },
    ]);
    const newsList = reactive([
      "精选",
      "慢病",
      "饮食",
      "儿童",
      "睡眠",
      "养生",
      "养性",
    ]);
    const handleClick = () => {
      if (show.value) {
        show.value = false;
      } else {
        show.value = true;
      }
    };
    const handsClick = () => {
      router.push("/homedoctor");
    };
    const goTosearch = () => {
      router.push("/homesearch");
    };
    onMounted(() => {
      window.addEventListener("scroll", handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    });

    const getdata = async () => {
      const res = await getHomeListdata({
        curr: curr.value,
        pagesize: 4,
      });
      if (res.result.length === 0) {
        state.finished = true;
      } else {
        resList.arr = resList.arr.concat(res.result);
        state.loading = false;
      }
      str.value = res.prefix;
    };
    const handleScroll = () => {
      // console.log();
      transfromStyle.value.transform = `translate(${
        (115 * document.documentElement.scrollTop) / 40
      }px , ${(-15 * document.documentElement.scrollTop) / 40}px)`;
      transfromStyle.value.width = `${
        100 - document.documentElement.scrollTop
      }%`;
      backgroundStyle.value.background = `rgba(255, 255, 255,${
        number.value * document.documentElement.scrollTop
      })`;
      if (document.documentElement.scrollTop > 40) {
        flag.value = true;
        transfromStyle.value.transform = `translate(115px,-15px)`;
        transfromStyle.value.width = `${
          100 - document.documentElement.scrollTop
        }%`;
      } else {
        flag.value = false;
        // transfromStyle.value.transform = `translate(0px,0px)`
      }
      if (document.documentElement.scrollTop > 200) {
        nav.value = true;
      } else {
        nav.value = false;
      }
    };
    const goTop = () => {
      document.documentElement.scrollTop = 0;
    };
    //页面到底触发onload
    const onLoad = () => {
      setTimeout(() => {
        getdata();

        curr.value++;
      }, 700);
    };
    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll);
    });
    const goToMsg = () => {
      router.push("/homemessage");
    };
    return {
      transfromStyle,
      number,
      backgroundStyle,
      goToDetatil,
      handleScroll,
      flag,
      goTosearch,
      gridList,
      navGridList,
      images,
      healthList,
      show,
      handleClick,
      active,
      newsList,
      value,
      resList,
      str,
      nav,
      goTop,
      state,
      onLoad,
      curr,
      getdata,
      router,
      goToMsg,
      handsClick,
      // actives
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/var.less";
#homepage {
  position: relative;
}
.van-button {
  width: 100px;
  height: 33px;
}
// .fade-enter-active, .fade-leave-active {
//   transition: all .5s;
// }
// .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
//   background: rgba(255, 255, 255, 1);
// }
// .movearea {
//   background: rgba(255, 255, 255, 1) !important;
//   transition: all 0.3 !important;
// }
.van-grid-item__content {
  padding: 10px 0 !important;
}
header {
  width: 100%;
  height: 120px;
  background: linear-gradient(#369aff, white);
  .title {
    width: 100%;
    // background: red;
    height: 52px;
    // background: rgba(255, 255, 255, 0);
    // opacity: 0;
    z-index: 9999;
    padding: 0 15px;
    position: fixed;
    top: 0;
    left: 0;

    .center();
    img {
      width: 100%;
      height: 100%;
    }
    .search {
      flex: 1;
    }
    .message {
      width: 23px;
      height: 23px;
      font-size: 24px;
      .center();
      color: white;
    }
    .state {
      width: 65px;
      height: 34px;
      color: white;
      p {
        margin: 2px 0px;
        font-size: 14px;
      }
      img {
        width: 54px;
        height: 12px;
      }
    }
    .logo {
      width: 41px;
      height: 34px;
    }
  }
  .bigSearch {
    // margin-top: 60px;
    position: absolute;
    // top: 30px;
    left: 0;
    top: 52px;
    z-index: 1;
  }
}
.advertising {
  width: 100%;
  height: 98px;
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  align-items: center;
  div {
    width: 50%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
nav {
  margin-top: 15px;
  width: 100%;
  // height: 175px;
  padding: 0px 20px;
  .nav_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 15px;
      text-indent: 5px;
    }
    div {
      width: 100px;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      span {
        color: #999999;
        font-size: 12px;
        line-height: 35px;
      }
      img {
        width: 10px;
        height: 15px;
        margin: 0 0 2px 2px;
      }
    }
  }
}
.banner {
  width: 100%;
  height: 100px;
  padding: 0 13px;
  .my-swipe {
    width: 100%;
    height: 100%;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.health-data {
  width: 100%;
  padding: 0px 20px;
  margin: 10px 0 15px 0;
  .health_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 15px;
      text-indent: 5px;
    }
    div {
      width: 100px;
      text-align: right;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      span {
        color: #999999;
        font-size: 12px;
        line-height: 35px;
      }
      img {
        width: 10px;
        height: 15px;
        margin: 0 0 2px 2px;
      }
    }
  }
  .heaith_content {
    width: 100%;
    .item {
      width: 154px;
      background: #f2f2f2;
      height: 106px;
      margin-bottom: 12px;
      border-radius: 5px;
      padding: 10px;
      .item_top {
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 30px;
          height: 100%;
        }
        span {
          font-size: 15px;
          margin-left: 5px;
          font-weight: 900;
        }
      }
      .record {
        color: #999999;
        font-size: 12px;
        text-align: left;
        margin: 5px 0;
      }
      .item_bottom {
        text-align: left;
        span {
          font-size: 12px;
          &::before {
            content: "";
            display: inline-block;
            width: 6px;
            height: 16px;
            border-radius: 3px;
            border: 2px solid #333;
            margin-right: 3px;
          }
        }
        .pharmacy {
          width: 19px;
          height: 19px;
          background: white;
          margin-top: 15px;
          img {
            width: 19px;
            height: 19px;
          }
        }
      }
    }
    .heaith_content_top {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }
    .heaith_content_bottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      // position: relative
    }
    .heaith_more {
      // position: absolute;
      width: 100%;
      height: 30px;
      // top: 0;
      .center();
      font-size: 14px;
      color: #999999;
    }
  }
}
.section_item {
  width: 100%;
  height: 132px;
  padding: 10px;
  h3 {
    margin-left: 10px;
    font-size: 16px;
    text-align: left;
  }
  .sections_item_body {
    width: 100%;
    height: 100px;
    .center();
    padding: 10px;
    img {
      width: 63px;
      height: 73px;
    }
    .sections_item_body_middle {
      flex: 1;
      height: 100%;
      text-align: left;
      .section_p1 {
        font-size: 16px;
        padding-left: 10px;
        line-height: 20px;
        margin: 5px 0 16px 0;
      }
      .section_p2 {
        color: #999999;
        font-size: 12px;
        text-indent: 10px;
      }
    }
  }
}
main {
  .van-tabs {
    // margin-top: 55px;
    padding: 0 10px;
  }
  .article_ul {
    padding: 20px 10px 0 10px;
    li {
      width: 100%;
      height: 150px;
      margin-bottom: 10px;
      h3 {
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .article {
        height: 70px;
        width: 100%;
        margin: 15px 0;
        .center();

        .article_left {
          width: 70%;
          height: 100%;
          p {
            font-size: 14px;
            color: #666666;
            width: 100%;
            line-height: 20px;
            overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
            text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
            display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
            -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数。*/
            -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
          }
          .article_user {
            height: 20px;
            width: 100%;
            font-size: 12px;
            color: #999999;
            line-height: 20px;
            margin-top: 15px;
            img {
              width: 20px;
              margin-right: 3px;
              height: 100%;
            }
          }
        }
        .article_right {
          width: 30%;
          height: 100%;
          font-size: 12px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .acticle_p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
aside {
  position: fixed;
  right: 3%;
  bottom: 12%;
  width: 45px;
  height: 45px;
  .goTop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    font-size: 12px;
  }
}
</style>
